<template class="task-template">
  <section id="abp-cli-new-section" class="section js-section u-category-abp-cli">
    <header class="section-header">
      <div class="section-wrapper">
        <h1>
          <svg class="section-icon"><use xlink:href="assets/img/icons.svg#icon-windows"></use></svg>
          Abp CLI: <code>new</code>
        </h1>
        <h3>Generate a new solution based on the ABP startup templates.</h3>
        <p>See the <a href="https://docs.abp.io/en/abp/latest/CLI#new">ABP framework documentation<span class="u-visible-to-screen-reader">(opens in new window)</span></a> in your browser for more informations.</p>
      </div>
    </header>

    <div class="demo">
      <div class="demo-wrapper">
        <button id="new-window-demo-toggle" class="js-container-target demo-toggle-button">Create a new app
          <div class="demo-meta u-avoid-clicks">UI: mvc, angular, no-ui <span class="demo-meta-divider">|</span> DB provider: ef, mongodb</div>
        </button>
        <div id="box-abp-cli-new-app" class="demo-box">
          <h5 style="margin-top: 0;">Command</h5>
          <pre><code>abp new &lt;solution-name&gt; [options]</code></pre>
          <div id="app-project-info">
            <h5>Project Name</h5>
            <input id="app-project-name" class="demo-input" type="text" />
            <h5>Output Folder</h5>
            <input id="app-project-folder" class="demo-input" type="text" />
            <button id="app-select-folder-btn" class="demo-button">Select</button>
            <h5>Abp Version</h5>
            <input id="app-project-version" class="demo-input" type="text" value="latest" />
          </div>

          <div id="app-options-ui">
            <h5>UI Framework</h5>
            <div>
              <div>
                <input name="app-ui" type="radio" id="app-ui-mvc" value="mvc" checked />
                <label>MVC</label>
              </div>
              <div>
                <input name="app-ui" type="radio" id="app-ui-angular" value="angular" />
                <label>Angular</label>
              </div>
              <div>
                <input name="app-ui" type="radio" id="app-ui-none" value="none" />
                <label>No-UI</label>
              </div>
            </div>
          </div>

          <div id="app-options-db">
            <h5>Database Provider</h5>
            <div>
              <div>
                <input name="app-db" type="radio" id="app-db-ef" value="ef" checked />
                <label>Entity Framework Core</label>
              </div>
              <div>
                <input name="app-db" type="radio" id="app-db-mongodb" value="mongodb" />
                <label>MongoDB</label>
              </div>
            </div>
          </div>

          <div id="app-options-tiered">
            <h5>Extra Options</h5>
            <div>
              <div>
                <input id="app-tiered" type="checkbox" />
                <label>Tiered</label>
              </div>
            </div>
            <p id="app-tiered-desc">Creates a tiered solution where Web and Http API layers are physically separated. If not checked, creates a layered solution which is less complex and suitable for most scenarios.</p>
          </div>

          <div id="app-options-separate" class="hidden">
            <h5>Extra Options</h5>
            <div>
              <div>
                <input id="app-separate-identity-server" type="checkbox" />
                <label>Separate identity server</label>
              </div>
            </div>
            <p id="app-separate-identity-server-desc">Separates server side into two applications: First one is for the identity server and the second one is for your server side HTTP API.</p>
          </div>
          <h5>
            <button class="demo-button" id="app-execute">Execute</button>
          </h5>

          <div id="app-process" class="hidden">
            <h5>Command Line Process</h5>
            <textarea></textarea>
          </div>
        </div>
      </div>
    </div>

    <div class="demo">
      <div class="demo-wrapper">
        <button id="new-window-demo-toggle" class="js-container-target demo-toggle-button">Create a new module
          <div class="demo-meta u-avoid-clicks">UI: full-ui, no-ui</div>
        </button>
        <div id="box-abp-cli-new-module" class="demo-box">
          <h5 style="margin-top: 0;">Command</h5>
          <pre><code>abp new &lt;solution-name&gt; [options]</code></pre>
          <div id="module-project-info">
            <h5>Project Name</h5>
            <input id="module-project-name" class="demo-input" type="text" />
            <h5>Output Folder</h5>
            <input id="module-project-folder" class="demo-input" type="text" />
            <button id="module-select-folder-btn" class="demo-button">Select</button>
            <h5>Abp Version</h5>
            <input id="module-project-version" class="demo-input" type="text" value="latest" />
          </div>

          <div id="module-options-no-ui">
            <h5>Extra Options</h5>
            <div>
              <div>
                <input id="module-no-ui" type="checkbox" />
                <label>No-UI</label>
              </div>
            </div>
            <p id="module-no-ui-desc">Specifies to not include the UI. This makes possible to create service-only modules (a.k.a. microservices - without UI).</p>
          </div>

          <h5>
            <button class="demo-button" id="module-execute">Execute</button>
          </h5>

          <div id="module-process" class="hidden">
            <h5>Command Line Process</h5>
            <textarea></textarea>
          </div>
        </div>
      </div>
    </div>

    <script type="text/javascript">
      require('./renderer-process/abp-cli/abp-cli-new-app.js')
      require('./renderer-process/abp-cli/abp-cli-new-module.js')
    </script>

  </section>
</template>
